<template>
  <div class="content">
    <div class="content-main">
      <div class="left-content">
        <div class="left-content-title">
          <img :src="detailsData.coverPhoto" alt="" width="350px" height="220px" />
          <div class="info-content">
            <div class="info-title">{{ detailsData.title }}</div>
            <div
              ><span class="tag-btn">{{
                trainingTypeCodes.find((d) => d.dictionaryCode === detailsData.trainingType)
                  ?.dictionaryName || detailsData.trainingType
              }}</span></div
            >
            <div class="info-content-item" v-for="(item, index) in infoList" :key="index">
              <span class="item-name"
                >{{ item.name }}: <span class="item-value">{{ item.value }}</span></span
              >
            </div>
            <span class="type-btn">{{ getStatusText }}</span>
          </div>
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="活动详情" name="1">
            <div class="left-content-info" v-html="detailsData.eventDetails"></div>
          </el-tab-pane>
          <el-tab-pane label="课程内容" name="2">
            <div class="left-content-info" v-html="detailsData.courseContent"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script setup>
import { cmsTrainingDetail } from '@/api'
import { useRoute } from 'vue-router'
const dictStore = useDictStore()
dictStore.fetchDictionary()
const trainingTypeCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_Training_Type')
})
const registrationMethodCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_Registration_Method')
})

const activeName = ref('1')
const infoList = ref([
  { name: '开课时间', value: '', label: 'startClassTime' },
  { name: '培训地点', value: '', label: 'trainingAddress' },
  { name: '技术领域', value: '', label: 'industryName' },
  { name: '报名方式', value: '', label: 'registrationMethodName' },
  { name: '报名截止', value: '', label: 'registrationDeadlineTime' }
])
const detailsData = ref({})
const route = useRoute()

// 根据开课时间计算状态文本
const getStatusText = computed(() => {
  if (!detailsData.value.startClassTime) return '未开始'

  const now = new Date()
  const startTime = new Date(detailsData.value.startClassTime)

  // 只比较日期部分，忽略时间
  const nowDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
  const startDate = new Date(startTime.getFullYear(), startTime.getMonth(), startTime.getDate())

  if (nowDate < startDate) {
    return '未开始'
  } else if (nowDate.getTime() === startDate.getTime()) {
    return '进行中'
  } else {
    return '已结束'
  }
})

function getDetail() {
  cmsTrainingDetail({
    id: route.query.id
  }).then((res) => {
    if (res.code == '0') {
      detailsData.value = res.data
      infoList.value.forEach((item) => {
        if (item.label == 'registrationMethodName') {
          item.value =
            registrationMethodCodes.value.find(
              (d) => d.dictionaryCode == detailsData.value.registrationMethod
            )?.dictionaryName || detailsData.value.registrationMethod
        } else {
          item.value = res.data[item.label]
        }
      })
      console.log('🚀 ~ infoList.value.forEach ~ infoList.value:', infoList.value)
    }
  })
}
onMounted(() => {
  getDetail()
})
</script>
<style lang="scss" scoped>
.content {
  background-color: #f6faff;
  padding-top: 20px;
}

.content-main {
  width: 1200px;
  height: 1300px;
  margin: auto;

  .left-content {
    width: 100%;
    height: 800px;
    padding: 20px;

    .type-btn {
      position: absolute;
      bottom: 0;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 220px;
      height: 44px;
      background: #efeef2;
      color: #333;
    }

    .left-content-title {
      display: flex;
      margin-bottom: 20px;
      padding: 20px;
      height: 220px;
      border: 1px solid #ebedf0;
      background-color: #fff;

      .info-content {
        position: relative;
        width: 100%;
        margin-left: 20px;

        .info-title {
          font-weight: bold;
          font-size: 22px;
          color: #333;
        }

        .tag-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 15px 0;
          width: 40px;
          height: 24px;
          background: #ff7a00;
          font-size: 14px;
          color: #fff;
        }

        .info-content-item {
          margin-bottom: 3px;
          font-size: 14px;
          color: #8992a9;

          .item-name {
          }

          .item-value {
          }
        }
      }
    }

    .left-content-info {
      width: auto;
      height: 600px;
      padding: 20px;
      overflow: auto;
      background-color: #fff;
    }
  }

  .right-content {
    width: 100%;
    padding: 20px;
    background-color: #fff;

    h1 {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
    }

    .list-info {
      margin: 15px 10px;

      .list-info-img {
        padding: 10px 20px 5px 20px;
        border: 1px solid #ebedf0;
        font-size: 13px;
        text-align: center;
      }

      .list-title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
        padding-right: 30px;
        padding-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
